<template>
	<view class="container">
		<view class="time" @tap="add">{{ formatSeconds(timeNumber) }}</view>
		<view class="add-list" @tap="add">新增气体检测</view>
		<img src="./bg.gif" alt="" />
		<view class="center">
			<view class="number">{{ detail.yhl }}%</view>
			<view class="title">本次气体检测含氧量</view>
		</view>
	<!-- 	<view class="info-box">
			<view class="info-box-inner">
				<view class="item">含氧量</view>
				<view class="item">{{ detail.fxr }}</view>
				<view class="item">{{ detail.yhl }}%</view>
			</view>
		</view> -->
		<view class="btn pasue-btn" @tap="pasue">{{ btnText }}</view>
		<view class="btn stop-btn" @tap="endWork">结束作业</view>
		<!-- <u-modal :show="popupShow" title="确认关闭" :content="content" :closeOnClickOverlay="true" @confirm="stop">
		</u-modal> -->
	</view>
</template>

<script>
	import * as api from "@/api/gasTest";

	export default {
		data() {
			return {
				popupShow: false,
				timer: null,
				content: "确定要结束任务？",
				timeNumber: 0,
				btnText: "暂停",
				params: {},
				detail: {},
			};
		},
		methods: {
			endWork(){
					let _that = this
				uni.showModal({
					title: "作业监护",
					content: "确定要结束监护吗？",
					success: function(res) {
						if (res.confirm) {
							try{
								_that.stop()
							}catch(e){
								//TODO handle the exception
							}finally{
								uni.navigateTo({
									url:"/pages/operationTicket/maintenance/maintenance"
								})
							}
							
						}else if(res.cancel){
							console.log('用户选择了取消');
						}
					}
				})
			},
			add() {
				this.timer && clearTimeout(this.timer);
				uni.navigateTo({
					url: "../gasTest/gasTest?params=" + encodeURIComponent(JSON.stringify(this.params)),
				});
			},
			getTickListById(id) {
				api.getTickListById(id).then((res) => {
					console.log(res);
					this.detail = res.data;
				});
			},
			formatSeconds(value) {
				var secondTime = parseInt(value); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) {
					//如果秒数大于60，将秒数转换成整数
					//获取分钟，除以60取整数，得到整数分钟
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取佘，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取佘的分，获取分钟除以60取佘的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				var result = "" + parseInt(secondTime) + "秒";

				if (minuteTime > 0) {
					result = "" + parseInt(minuteTime) + "分" + result;
				}
				if (hourTime > 0) {
					result = "" + parseInt(hourTime) + "小时" + result;
				}
				return result;
			},
			pasue() {
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
					this.btnText = "启动";
				} else {
					this.btnText = "暂停";
					this.timer = setInterval(() => {
						this.timeAdd();
					}, 1000);
				}
			},
			timeAdd() {
				this.timeNumber++;
			},
			stop() {
				// this.popupShow = false;
				api.endWork(this.params.id).then((res) => {
					uni.showToast({
						icon: "none",
						title: "提交成功！",
					});
					console.log(res);
				});
			},
			submit() {},
			// 驳回
			goreasonforRejection() {
				uni.navigateTo({
					url: "../reasonforRejection/reasonforRejection?params=" +
						encodeURIComponent(JSON.stringify(this.params)),
				});
			},
		},
		onShow() {
			this.timer = setInterval(() => {
				this.timeAdd();
			}, 1000);
		},
		onLoad(options) {
			this.params = JSON.parse(decodeURIComponent(options.params));
			this.getTickListById(this.params.id);
		},
		onUnload() {
			this.timer && clearTimeout(this.timer);
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: calc(100vh - 88rpx);
		position: relative;
		background: #e5e5e5;

		img {
			width: 100%;
			height: 80%;
		}

		.time {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			color: #fff;
		}

		.add-list {
			position: absolute;
			width: 280rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			top: 40rpx;
			right: 40rpx;
			background: #fff;
			border-radius: 50rpx;
		}

		.center {
			position: absolute;
			width: 100%;
			text-align: center;
			color: #fff;
			top: 30%;

			.number {
				font-size: 100rpx;
				font-style: italic;
			}

			.title {
				
			}
		}

		.btn {
			position: absolute;
			width: 96%;
			left: 2%;
			padding: 24rpx 0;
			text-align: center;
			border-radius: 10rpx;
			font-size: 40rpx;
			background: #fff;
		}

		.pasue-btn {
			bottom: 140rpx;
			color: #fff;
			background: #898989;
		}

		.stop-btn {
			bottom: 20rpx;
			background: rgb(25, 137, 250);
			color: #fff;
		}

		.btn1 {
			width: 96%;
			padding: 24rpx 0;
			text-align: center;
			border-radius: 10rpx;
			font-size: 40rpx;
			background: #fff;
		}
	}

	.info-box {
		position: absolute;
		top: calc(80% - 80rpx);
		color: #fff;
		height: 20px;
		width: 100%;
		padding: 20rpx 0;
		background: rgba(0, 0, 0, 0.1);

		.info-box-inner {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
		}

		.item {
			float: left;
			text-align: center;
			width: 32%;
			border-right: 2px solid #fff;
		}

		.item:nth-child(3) {
			border: none;
		}
	}
</style>
